<template>
  <drawer :show="props.show" :show-border="false" :title="'拨打电话'" @close="closeTel" :show-close="true" :zIndex="3000">
    <view class="tel_box">
      <view
          class="telrow"
          :class="{active:telSelected===index}"
          @click="changeTel(index)"
          v-for="(item,index) in telList"
      >{{item}}</view>
    </view>
    <view class="saveTel">
      <view class="btn" @click="handleDial">
        <image src="../../assets/images/orderTracking/dial.png"></image>
        <text>拨打电话</text>
      </view>
    </view>
  </drawer>
</template>

<script lang="ts" setup>
import { ref , defineProps, defineEmits,withDefaults, watch } from "vue";
import {getBranchTel} from "@/@api";
import Taro from "@tarojs/taro";
const props = withDefaults(
    defineProps<{
      show: boolean,
      tel: string
    }>(),
    {
      show: false,
      tel: '',
    }
)
const emit = defineEmits<{
  //(e: 'close', args: boolean)
  (e: 'close')
}>()


const telList = ref([])
const telSelected = ref<number>(0)
const toDial = async (str)=>{
  if(!str){
    Taro.showToast({
      icon: 'none',
      title: '该网点无联系方式'
    })
  }
  else{
    if(str.indexOf('/')!==-1){
      telList.value = str.split('/')
    }
    else if(str.indexOf(';')!==-1){
      telList.value = str.split(';')
    }
    else if(str.indexOf('；')!==-1){
      telList.value = str.split('；')
    }
    else if(str.indexOf('、')!==-1){
      telList.value = str.split('、')
    }
    else if(str.indexOf(' ')!==-1){
      telList.value = str.split(' ')
    }
    else if(str.indexOf(')')!==-1){
      let arr = str.split(')')
      arr.pop()
      telList.value = arr.map(item=>{return item+')'})
    }
    else if(str.indexOf('）')!==-1){
      let arr = str.split('）')
      arr.pop()
      telList.value = arr.map(item=>{return item+'）'})
    }
    else{
      telList.value = [str]
    }
    telSelected.value = 0
  }
}
const closeTel = ()=>{
  emit('close')
}
const changeTel = (type)=>{
  telSelected.value = type
}
const handleDial = ()=>{
  Taro.makePhoneCall({
    phoneNumber: telList.value[telSelected.value].replace(/[^0-9]/ig,'')
  })
}

watch(()=>props.show,(newVal)=>{
  if(newVal){
    console.log(props.tel)
    toDial(props.tel)
  }
})

</script>

<style lang="scss">
.tel_box {
  width: 100%;
  border-bottom: 1rpx solid #f0f0f0;
  padding: 0 24rpx;
  box-sizing: border-box;
  .telrow {
    width: 100%;
    border-top: 1rpx solid #f0f0f0;
    text-align: center;
    line-height: 72rpx;
    font-size: 28rpx;
    color: #999;
    &.active {
      font-size: 32rpx;
      color: #3091ff;
    }
  }
}
.saveTel {
  width: 100%;
  background-color: #fff;
  box-sizing: border-box;
  padding: 32rpx 24rpx 20rpx;
  .btn {
    width: 100%;
    height: 80rpx;
    border-radius: 40rpx;
    background-color: #0966ff;
    color: #fff;
    font-size: 32rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    image {
      width: 36rpx;
      height: 36rpx;
      margin-right: 16rpx;
    }
  }
}

</style>
